<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box { overflow:hidden;width: 1200px; height: 300px; transform-style: perserve-3d; margin: 50px auto; position: relative;}
        .box img{width:600px; position: absolute; top: 60px; transition:all .3s linear;}

        .box:hover .btn{opacity: 1;}

        .front {left: 0px;}
        .back {left: 600px;}
        .active {left: 300px; transform: scale(1.5); z-index: 10;}
        .after{z-index: -1}
        .following{
            z-index:  -2;
        }

        .btns .btn {width: 60px; height: 60px; display: block; position: absolute; background-color: rgba(0,0,0,.5); font-size: 50px; font-family: "微软雅黑"; color:rgba(255,255,255,.5); line-height: 55px; text-align: center; cursor: pointer; z-index: 100; opacity: 0; transition:opacity .3s linear;}
        .btns .btn:first-child {top: 125px;}
        .btns .btn:last-child {top: 125px; right: 0px;}
    </style>
</head>
<body>

<div class="container">
    <div class="box">
        <img class="front" src="img/stainless-steel-fork-near-clear-glass-on-tray-1510690.jpg" alt="PIC">
        <img class="active" src="img/burrito-chicken-delicious-dinner-461198.jpg" alt="PIC">
        <img class="back" src="img/asia-carrot-chopsticks-delicious-357756.jpg" alt="PIC">
        <img class="following" src="img/photo-of-vegetable-salad-in-bowls-1640770.jpg" alt="PIC">
        <img class="following" src="img/1.jpeg" alt="PIC">
        <img class="following" src="img/5f36aa42e831bca87820c64afcb391e3.jpg" alt="PIC">
        <div class="btns">
            <span class="btn">&lt;</span>
            <span class="btn">&gt;</span>
        </div>
    </div>
</div>
<script>
    onload = function(){
        var btns = document.getElementsByClassName('btn'),
            imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');

        var index = 2,
            front = 0,
            back = 0,
            offset = false,
            timer = setInterval(timer,5000);



        for(var i=0;i<btns.length;i++){
            (function(i){
                btns[i].onclick = function(){click(i)};
            })(i);

            btns[i].onmouseover = function(){
                offset = true;
            }
            btns[i].onmouseout = function(){
                offset = false;
            }
        }

        for(var i=0;i<imgs.length;i++){
            imgs[i].onmouseover = function(){
                offset = true;
            }
            imgs[i].onmouseout = function(){
                offset = false;
            }
        }

        function timer(){
            console.log(offset)
            if(offset){
                return;
            }
            else{
                click(1)
            }
        }
        var jude = true
        var sum=imgs.length - 1;
        var two =   imgs.length - 2
        var three = imgs.length - 1
        var four = 0;

            function click(x) {
                  console.log(index);
                    for (var i = 0; i < imgs.length; i++) {
                        imgs[i].setAttribute('class', 'following')

                    }
                    if (index == imgs.length - 1) {
                        var num = index - sum;
                        imgs[index - 2].setAttribute('class', 'after')
                        imgs[index - 1].setAttribute('class', 'front')
                        imgs[index].setAttribute('class', 'active')
                        imgs[num].setAttribute('class', 'back');
                    } else if (index == imgs.length + 2) {
                        index = 2
                        sum=imgs.length - 1;
                        two =   imgs.length - 2
                        three = imgs.length - 1
                        four = 0;
                        imgs[index - 2].setAttribute('class', 'after')
                        imgs[index - 1].setAttribute('class', 'front')
                        imgs[index].setAttribute('class', 'active')
                        imgs[index + 1].setAttribute('class', 'back');
                        index++;
                        return
                    } else if (index > imgs.length - 1) {
                        var num = index - sum;
                        imgs[two].setAttribute('class', 'after')
                        imgs[three].setAttribute('class', 'front')
                        imgs[four].setAttribute('class', 'active')
                        imgs[num].setAttribute('class', 'back');
                        console.log(four, num)
                        two = three
                        three = four
                        four = num;
                    } else {
                        imgs[index - 2].setAttribute('class', 'after')
                        imgs[index - 1].setAttribute('class', 'front')
                        imgs[index].setAttribute('class', 'active')
                        imgs[index + 1].setAttribute('class', 'back');
                    }

                    if (jude) {
                        index++;
                    }

                }


    }
</script>
</body>
</html>